<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Diamonds-payment</title>

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    img {
      vertical-align: middle;
    }

    a {
      text-decoration: none;
    }

    li {
      list-style: none;
    }

    .clear_float::before,
    .clear_float::after {
      content: "";
      display: table;
    }

    .clear_float::after {
      clear: both;
    }

    .diamonds {
      max-width: 1260px;
      margin: 0px auto;
    }

    .diamonds .content {
      width: 88.88889%;
      margin: 0 auto;
    }
  </style>
<link rel="stylesheet" href="../css/payment.css">


</head>

<body>
  <div class="diamonds" style="padding: 0 4%;">

    <div class="content clear_float"  style="padding: 0 76px;min-width: 800px;">
      <div class="in_left">
      <!-- 头部 联系信息 -->
      <section class="in_sec1">
        <!-- logo和导航 -->
        <div class="clear_float">
          <a href="./index.html">
            <img src="../resource/images/7D-Logo---3_efb37a3b-ca32-456f-9747-ccbc0f94e66c.webp" alt="" class="logo">
          </a>

          <ul class="in_nav">
            <li><a href="./Cart.html"> Cart</a></li>
            <li> ＞ <a href="./information.html"> Information</a></li>
            <li> ＞ <a href="./payment.html"  style="font-weight: 600;"> Payment</a></li>
          </ul>
        </div>

      </section>

      <!-- 第一部分 支付 -->
      <section class="pay_sec1" >

        <div class="pay_sec1_div1 clear_float">
          <div class="clear_float" style="padding-bottom: 5px;">
            <div class="pay_sec1_contact">Contact</div>
            <div class="pay_sec1_youxiang" style="padding-bottom: 5px;">2684360078@qq.com</div>
            <span class="pay_sec1_change"> <a href="./information.html">Change</a></span>
          </div>
          <hr>
          <div class="clear_float" style="padding-top: 10px;">
            <div class="pay_sec1_contact">Ship to</div>
            <div class="pay_sec1_youxiang"> sanFranciscoUs </div>
            <span class="pay_sec1_change2"> <a href="./information.html">Change</a></span>
          </div>
        </div>

          <h2 style="font-weight: 500;">Payment</h2>
          <p style="padding-top: 5px;padding-bottom: 15px;">All transactions are secure and encrypted.</p>

        <!-- 支付方式 -->
        <div class="pay_radio_paymentMethod">

          <!-- 选择方式 -->
          <div class="pay_radio_input">
            <label><input class="pay_radio1" type="radio" name="paymentMethod" style="float: left;"><div style="float: left; font-weight: 700;">Credit card</label>
          </div>
            <div class="pay_sec1_svg clear_float">

              <span style="font-weight: 300;">and more...</span>
              <svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"></path></svg>

              <svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-master"><title id="pi-master">Mastercard</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><circle fill="#EB001B" cx="15" cy="12" r="7"></circle><circle fill="#F79E1B" cx="23" cy="12" r="7"></circle><path fill="#FF5F00" d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-american_express"><title id="pi-american_express">American Express</title><g fill="none"><path fill="#000" d="M35,0 L3,0 C1.3,0 0,1.3 0,3 L0,21 C0,22.7 1.4,24 3,24 L35,24 C36.7,24 38,22.7 38,21 L38,3 C38,1.3 36.6,0 35,0 Z" opacity=".07"></path><path fill="#006FCF" d="M35,1 C36.1,1 37,1.9 37,3 L37,21 C37,22.1 36.1,23 35,23 L3,23 C1.9,23 1,22.1 1,21 L1,3 C1,1.9 1.9,1 3,1 L35,1"></path><path fill="#FFF" d="M8.971,10.268 L9.745,12.144 L8.203,12.144 L8.971,10.268 Z M25.046,10.346 L22.069,10.346 L22.069,11.173 L24.998,11.173 L24.998,12.412 L22.075,12.412 L22.075,13.334 L25.052,13.334 L25.052,14.073 L27.129,11.828 L25.052,9.488 L25.046,10.346 L25.046,10.346 Z M10.983,8.006 L14.978,8.006 L15.865,9.941 L16.687,8 L27.057,8 L28.135,9.19 L29.25,8 L34.013,8 L30.494,11.852 L33.977,15.68 L29.143,15.68 L28.065,14.49 L26.94,15.68 L10.03,15.68 L9.536,14.49 L8.406,14.49 L7.911,15.68 L4,15.68 L7.286,8 L10.716,8 L10.983,8.006 Z M19.646,9.084 L17.407,9.084 L15.907,12.62 L14.282,9.084 L12.06,9.084 L12.06,13.894 L10,9.084 L8.007,9.084 L5.625,14.596 L7.18,14.596 L7.674,13.406 L10.27,13.406 L10.764,14.596 L13.484,14.596 L13.484,10.661 L15.235,14.602 L16.425,14.602 L18.165,10.673 L18.165,14.603 L19.623,14.603 L19.647,9.083 L19.646,9.084 Z M28.986,11.852 L31.517,9.084 L29.695,9.084 L28.094,10.81 L26.546,9.084 L20.652,9.084 L20.652,14.602 L26.462,14.602 L28.076,12.864 L29.624,14.602 L31.499,14.602 L28.987,11.852 L28.986,11.852 Z"></path></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-discover"><title id="pi-discover">Discover</title><path d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000" opacity=".07"></path><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFF"></path><path d="M37 16.95V21c0 1.1-.9 2-2 2H23.228c7.896-1.815 12.043-4.601 13.772-6.05z" fill="#EDA024"></path><path fill="#494949" d="M9 11h20v2H9z"></path><path d="M22 12c0 1.7-1.3 3-3 3s-3-1.4-3-3 1.4-3 3-3c1.7 0 3 1.3 3 3z" fill="#EDA024"></path></svg>

            </div>
          </div>



          <div class="pay_radio_input pay_radio_attach clear_float">

            <div class="information"><input class="information_input" type="text" name="text"
              placeholder="Card number">
            </div>

            <button class="pay_sec1_btn2 pay_sec1_btn_1" style="position: absolute;top: 18px;right: 16px;"><img src="../resource/images/suo (1).png" alt=""></button>
            <p class="pay_sec1_p1">All transactions are secure <br> and encrypted.</p>
            <div class="information" style="margin: 10px 0;"><input class="information_input" type="text" name="text"
            placeholder="Name on card">
            </div>

            <div class="information" style="float:left;width: 48%;"><input class="information_input" type="text" name="text"
              placeholder="Expiration date(MM/YY)">
            </div>

            <div class="information" style="float: right;width: 48%"><input class="information_input" type="text" name="text"
                placeholder="Security code">
            </div>
            <button class="pay_sec1_btn2 pay_sec1_btn_2"><img src="../resource/images/wenhao1.png" alt=""></button>
            <p class="pay_sec1_p2">3-digit security code usually found on the back of your card. American Express cards have a 4-digit code located on the front.</p>
          </div>

          <div class="pay_radio_input">
            <label><input class="pay_radio1  pay_radio_img" type="radio" name="paymentMethod"><img style="height: 40px;" src="../resource/images/Pay.png" alt="" >     </label>
          </div>


          <div class="pay_sec1_img">
            <img src="../resource/images/zhifu.png" alt="">
          </div>



          <div class="pay_radio_input ">
            <label><input class="pay_radio1 pay_radio_img" type="radio" name="paymentMethod"><img style="height: 40px;" src="../resource/images/amazon.png" alt="" ></label>
          </div>

          <!-- 隐藏 -->
          <div class="pay_sec1_img">
            <img src="../resource/images/zhifu.png" alt="">
          </div>

          <div class="pay_radio_input ">
            <label><input class="pay_radio1 pay_radio_img" type="radio" name="paymentMethod"><img style="height: 40px;" src="../resource/images/oftenpay.png" alt="" ></label>
          </div>

          <!-- 隐藏 -->
          <div class="pay_sec1_img">
            <img src="../resource/images/zhifu.png" alt="">

          </div>
        </div>
      </section>


      <!-- 第二部分  -->
      <section class="pay_sec2">
        <h2 style="font-weight: 500;margin-top: 30px;">Billing address</h2>
        <p style="padding-top: 5px;padding-bottom: 15px;">Select the address that matches your card or payment method.</p>

        <!-- 填的内容 -->
        <div class="pay_sec2_div1">
          <div class="pay_radio_input " style="border-bottom: 1px solid #d9d9d9;">
            <label><input class="pay_radio1 pay_radio_img" type="radio" name="billingAddress"><span style="font-weight: 600;">Same as shipping address</span></label>
          </div>

          <div class="pay_radio_input ">
           <label><input class="pay_radio1 pay_radio_img" type="radio" name="billingAddress"><span style="font-weight: 600;">Use a different billing address</span></label>
          </div>


          <section class="in_sec2 clear_float" style="padding: 16px;background-color: #FAFAFA;">
            <!-- 浮动 -->
            <div class="clear_float">
              <div class="in_sec2_left1 information">
                <input class="information_input" type="text" placeholder="First name">
              </div>
              <div class="in_sec2_right1 information">
                <input class="information_input" type="text" placeholder="Last name">
              </div>
            </div>


            <!-- 地址 -->
            <div class="information" style="padding-bottom:10px;">
              <input class="information_input" type="text" placeholder="Company(optional)">
            </div>
            <div class="information" style="padding-bottom:10px;"><input class="information_input" type="text"
                placeholder="Address"></div>
            <div class="information" style="padding-bottom:10px;"><input class="information_input" type="text"
                placeholder="Apartment, suite, etc (optional)"></div>
            <div class="information" style="padding-bottom:10px;"><input class="information_input" type="text"
                placeholder="City"></div>

            <div class="in_sec2_div2">

              <!--下拉列表  -->
              <div class="in_dropdownlist clear_float " style="padding-bottom:10px;">


                <select name="select1" id="select1">
                  <option value="1">United States</option>
                  <option value="2">Canada</option>
                  <option value="3">Australia</option>
                  <option value="4">United Kingdom</option>
                  <option value="5">Afghanistan</option>
                  <option value="6">China</option>
                  <option value="7">Central African Republic</option>
                </select>




                <select name="select2" id="select2">
                  <option value="1">Alabama</option>
                  <option value="2">Alaska</option>
                  <option value="3">American Samoa</option>
                  <option value="4">California</option>
                  <option value="5">Delaware</option>
                  <option value="6">Oklahoma</option>
                  <option value="7">Micronesia</option>
                </select>

                <!-- 邮政编码 -->
                <div class="information"><input class="information_input" type="text" placeholder="ZIP code"></div>
              </div>

              <div class="information"><input class="information_input" type="tel" name="tel"
                  placeholder="Phone(Required For Shipping Notification"></div>
              <button class="in_sec2_btn1"><img src="../resource/images/wenhao1.png" alt=""></button>
              <p class="in_sec2_p">In case we need to contact
                you about your order</p>
            </div>

            <!-- 服务条款和购买 -->
            <div>
              <label><input type="checkbox" class="in_information_checkbox"> Send me special offers through text*</label>
              <p style="font-size: 10px; padding: 10px 0;">
                *I agree to receive recurring automated marketing text messages
                (e.g. cart reminders) at the phone number provided. Consent is not
                a condition to purchase. Msg & data rates may apply. Msg frequency
                varies. Reply HELP for help and STOP to cancel.
                View our
                <a style="text-decoration:underline;" href="">Terms of Service</a>
                and<a style="text-decoration: underline;" href="">Privacy Policy</a>.
              </p>


          </section>

      </section>
   <!-- 返回和确认 -->
          <div class="in_sec2_div3">
            <a href="./information.html">＜ Return to information</a>
           <button class="pay_sec2_btn2" style="border-radius: 5px;">Complete order</button>
          </div>
      <hr>

        <!-- 尾部 其他政策 -->

        <section class="in_sec3">
          <ul class="in_sec3_ul clear_float">
            <li><a href="">Refund policy</a></li>
            <li><a href="">Shipping policy</a></li>
            <li><a href="">Privacy policy</a></li>
            <li><a href="./login.html">My Account Login</a></li>
          </ul>
          <p class="in_sec3_p" style="font-weight: 300;">
            *I agree to receive recurring automated text messages at the phone number provided. Consent is not a
            <br>
            condition to purchase. Msg & data rates may apply. Click to view our Terms of Service.
          </p>
        </section>

    </div>

      <!-- 右边部分 -->
      <section class="in_right">
        <!-- 购买的商品 -->
        <div class="clear_float in_sec3_div1">
          <img style="height: 65px;" src="../resource/images/mote.png" alt="商品图片">
          <span style="font-weight: 600;font-size: 14px;"> productName</span>
          <span class="in_sec3_span">＄ 125.00</span>
        </div>
        <hr>
        <!-- 申请折扣码 -->
        <form action="">
          <div class="information in_sec3-discount clear_float">
            <input class="information_input" type="text" placeholder="Gift card or discount code">
            <button class="in_sec3_btn"> Apply</button>
          </div>
        </form>
        <hr>
        <!-- 总价 -->
        <div class="clear_float in_sec3_div2" style="margin-top: 20px;">
          <span style="font-size: 16px;font-weight: 400;">Total</span>
          <span class="in_sec3_span3">＄ 125.00</span>
          <span class="in_sec3_span2">USD</span>
        </div>
        </div>
      </section>

    </div>


  </div>
</body>

</html>
